import React, {Component,PureComponent} from 'react';


const Demo5Context = React.createContext({
    name: 'Alice',
})
class Demo5 extends PureComponent {
    state ={
        name: 'Jack'
    }

    getName =()=>{
        this.setState({name: this.state.name === 'Jack'? 'Lucy':'Jack'})
    }

    refresh =()=>{
        this.setState({});
    }

    render() {
        return (
            <div>
                {/*父组件通过Context.Provider将值传递给子孙组件*/}
                <Demo5Context.Provider value={this.state.name}>
                    <Child/>
                </Demo5Context.Provider>

                <button onClick={this.getName}>重新渲染</button>
                <button onClick={this.refresh}>刷新</button>

            </div>
        );
    }
}

export default Demo5;



function Child(props){
    console.log("render")
    return(
        <Demo5Context.Consumer>
            {
                value => (
                    <h1>{value}</h1>
                )
            }
        </Demo5Context.Consumer>
    )

}